<template>
  <div style="display: inline-block">
    <el-image
      :src="md5 | imageFilter(width)"
      class="image-show-img"
      :style="imgStyle"
      mode="widthFix"
      alt="img"
      @click="imagePreview"
    />
    <el-dialog :visible.sync="imagePreviewVisible" append-to-body>
      <div style="display:flex;justify-content:center">
        <span v-if="loading">加载中...</span>
        <el-image width="70%" :src="md5 | imageFilterByOriginal" lazy @load="load" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import filters from '@/filters/index'

export default {
  filters: { ...filters },
  props: {
    md5: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 800
    },
    imgStyle: {
      type: String,
      default: ''
    },
    previewVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      imagePreviewVisible: false,
      imagePreviewUrl: {},
      loading: true
    }
  },
  computed: {},
  methods: {
    imagePreview() {
      this.previewVisible && (this.imagePreviewVisible = true)
    },
    load() {
      this.loading = false
    }
  }
}
</script>
<style lang="scss">
  .image-show-img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .el-image__error {
    font-size: 6px !important;
  }
</style>
